<template>
	<view>
		<map id="map" :latitude="centerLat" :longitude="centerLng" :markers="markers" :scale="14"
			@markertap="handleMarkerTap" style="width: 100%; height: 900rpx;"></map>


		<view style="" class="fixed-container">

			<view class="">
				<view class="list_box1 " style="padding: 20rpx;">
					<view class="pickup">
						转单中...
					</view>
					<view class="part2">
						<view class="box_add">
							<view class="add_name">
								<view class="buy">
									<image src="../../../static/image/icon_f.png"></image>
								</view>
								<view class="sh_name" @click="goStart()">
									{{orderDelites.shipperAddress}}
									<image
										src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/daf10b235582c81cae1ed1542ea34cc7.png"
										style="width:33rpx;height: 37rpx;"></image>
								</view>
								<view class="xs_add" @click="coll(orderDelites.shipperPhone)"
									v-if="orderDelites.indentType != 5">
									{{orderDelites.shipper?orderDelites.shipper:''}}-
									{{orderDelites.shipperPhone?orderDelites.shipperPhone:''}}
									<image
										src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/facf54f8f15002dbe2344f3197ccc455.png"
										style="width: 35rpx;height: 38rpx;"></image>
								</view>
							</view>
						</view>
						<view class="jiantou">
							<image src="../../../static/rider/jiantou.png"></image>
						</view>
						<view class="box_add">
							<view class="add_name">
								<view class="send">
									<image src="../../../static/image/icon_d.png"></image>
								</view>
								<view class="sh_name" @click="goEnd()">
									{{orderDelites.receiverAddress}}
									<image
										src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/daf10b235582c81cae1ed1542ea34cc7.png"
										style="width:33rpx;height: 37rpx;"></image>
								</view>

								<view class="xs_add" @click="coll(orderDelites.receiverPhone)">
									{{orderDelites.receiver?orderDelites.receiver:''}}-
									{{orderDelites.receiverPhone?orderDelites.receiverPhone:''}}
									<image
										src="https://pt2.0.xianmxkj.com/file/uploadPath/2023/01/28/facf54f8f15002dbe2344f3197ccc455.png"
										style="width: 35rpx;height: 38rpx;"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="tips_box" v-if="orderDelites.pickupCode">
					<view class="tip_content">转单码</view>
					<view class="tips_box_qhm">{{orderDelites.pickupCode}}</view>
				</view>
				<view class="order_box u-skeleton-fillet">
					<view class="order_title">订单信息</view>
					<view class="order_list">
						<view class="order_name">订单号码</view>
						<view class="order_numbers" @click="copyOrder(orderDelites.orderNumber)">
							{{orderDelites.orderNumber}}
							<u-icon name="order"></u-icon>
						</view>
					</view>
				</view>


				<view class="order_box u-skeleton-fillet" v-if="selectedId">
					<view class="order_title">中转站信息</view>
					<view class="order_list">
						<view class="order_name">中转站名称</view>
						<view class="order_numbers">
							{{pointData.name}}
						</view>
					</view>
				</view>




				<view style="height: 110rpx;" v-if="selectedId"></view>
				<!-- 接单按钮 -->
				<view class="tabbar_btn" v-if="selectedId">
					<view class="btn_left" @click="zhuanOrder()">转单</view>
				</view>
			</view>
		</view>












		<!-- 转单 -->
		<u-popup v-model="showOrder" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
			close-icon-size="45" width="580rpx" height="400rpx">
			<view class="receipt_code">
				<view class="code_title">填写手机号码</view>
				<u-input v-model="phone" type="number" placeholder="填写转单人手机号码" :border="border" />
				<view class="sure" @click="zhuandan">确定</view>
			</view>
		</u-popup>

		<!-- 收货码弹框 -->
		<u-popup v-model="show" mode="center" border-radius="18" width="580rpx" height="400rpx">
			<view class="receipt_code">
				<view class="code_title">
					{{orderDelites.indentType == 5?'填写确认码':'填写收货码'}}
				</view>
				<u-input v-model="shouhuoma" :type="type" :placeholder="orderDelites.indentType == 5?'请输入确认码':'请输入收货码'"
					:border="border" />
				<view class="sure" @click="querenSh">确定</view>
			</view>
		</u-popup>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				centerLat: 0,
				centerLng: 0,
				markers: [],
				pointList: [],
				orderId: '',
				selectedId: null, // 当前选中标记ID
				orderDelites: {},
				pointData: {},
				areaCode:'',
			};
		},

		onLoad(e) {
			var that = this

			//获取当前位置
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.centerLng = res.longitude
					that.centerLat = res.latitude
				}
			});
			that.orderId = e.id
			that.areaCode = e.areaCode
			that.getOrderDetail(that.orderId)
			// that.loadMarkers();
		},
		methods: {
			loadMarkers() {
				this.$Request.getT('/app/point/list', {
					type: 3
				}).then(it => {
					if (it.code == 0) {
						this.pointList = it.data
						this.zhuanOrder()
						// this.markers = it.data.map(item => {
						// 	// this.getAnimation(item.id)
						// 	return {
						// 		id: item.id,
						// 		latitude: item.lat,
						// 		longitude: item.lng,
						// 		title: item.name,
						// 		width: 30, // 必须设置
						// 		height: 30, // 必须设置
						// 		iconPath: "../../../static/map/moren.png",
						// 		callout: {
						// 			content: item.name,
						// 			color: '#ffffff',
						// 			fontSize: 12,
						// 			borderRadius: 4,
						// 			bgColor: '#FF5A5A',
						// 			padding: 4,
						// 			display: 'ALWAYS'
						// 		}
						// 	}
						// });
					}
				})
			},

			getOrderDetail(id) {
				this.$Request.getT(`/app/logisticsOrder/queryOrderById/${id}`).then(res => {
					if (res.code == 0) {
						this.orderDelites = res.data
						this.zhuanOrder()
					}
				});
			},

			handleMarkerTap(e) {
				this.pointData = this.pointList.find(it => it.id == e.markerId)
				this.selectedId = e.markerId;
				// 立即更新动画数据触发渲染
				this.markers.forEach(it => {
					if (it.id == e.markerId) {
						it.iconPath = "../../../static/map/dianji.png"
						it.width = 40 // 必须设置
						it.height = 40 // 必须设置
					} else {
						it.iconPath = "../../../static/map/moren.png"
						it.width = 30 // 必须设置
						it.height = 30 // 必须设置
					}
				})
				// 使用setTimeout强制等待动画帧完成
				setTimeout(() => {
					this.$forceUpdate(); // 强制组件重新渲染
				}, 0);
			},




			zhuanOrder() {
				let wayPoints = this.orderDelites.wayPoints
				let deliteLog = wayPoints.findIndex(it=>it.areaCode == this.areaCode)
				let pointData = {}
				if(wayPoints.length > 0 && deliteLog < 0){
					pointData = wayPoints[0]
				}else{
					pointData = wayPoints[deliteLog + 1]
				}
				
				this.$Request.postT('/app/logisticsOrder/saveZhuanOrder', {
					logisticsOrderId: this.orderDelites.id,
					transferPointId: pointData.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '转单完成',
							icon: "success",
							duration: 2000,
							// success: (it) => {
							// 	uni.navigateBack({
							// 	  delta: 1, // 返回层级数（1表示返回上一页）
							// 	})
							// }
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			}
		}
	};
</script>
<style scoped>
	body {
		background: #F5F5F5;
	}

	.fixed-container {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #F5F5F5;
		width: 100%;
		height: 800rpx;
		overflow-y: auto;
		padding: 20rpx 0 40rpx;
	}



	.pickup {
		width: 90%;
		margin: 0 auto;
		font-size: 29rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		line-height: 60rpx;
	}

	.list_box1 {
		width: 90%;
		margin: 0 auto;
		/* height: 320rpx; */
		background: #FFFFFF;
		border-radius: 23rpx;
		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(198, 186, 181, 0.20);
		margin-top: 20rpx;
	}

	.part2 {
		width: 90%;
		margin: 0 auto;
		padding-top: 25rpx;
	}

	.box_add {
		display: flex;
	}

	.a {
		font-size: 16rpx;
	}

	.add_name {
		flex: 8;
		position: relative;
	}

	.buy {
		position: absolute;
		top: 6rpx;
	}

	.buy image {
		width: 30rpx;
		height: 30rpx;
	}

	.send {
		position: absolute;
		top: 6rpx;
	}

	.send image {
		width: 30rpx;
		height: 30rpx;
	}

	.sh_name {
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		text-indent: 38rpx;
		display: flex;
		align-items: center;
	}

	.xs_add {
		color: #999999;
		font-size: 21rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.jiantou {
		margin-left: 23rpx;
	}

	.jiantou image {
		width: 20rpx;
		height: 40rpx;
	}

	.tips_box {
		width: 90%;
		margin: 0 auto;
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
		border-radius: 22rpx;
		text-align: center;
	}

	.tips_box_qhm {
		color: #333333;
		font-size: 50rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
	}

	/* tip */
	.tip_box {
		width: 90%;
		margin: 0 auto;
		height: 180rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 22rpx;
	}

	.tip_content {
		width: 90%;
		margin: 0 auto;
		font-size: 27rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		margin-top: 15rpx;
	}

	/* 订单信息 */
	.order_box {
		width: 90%;
		margin: 0 auto;
		/* height: 300rpx; */
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 22rpx;
	}

	.order_title {
		width: 90%;
		margin: 0 auto;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 67rpx;
		letter-spacing: 3rpx;
	}

	.order_list {
		display: flex;
	}

	.order_name {
		flex: 1;
		margin-left: 35rpx;
		color: #999999;
		font-size: 25rpx;
		height: 75rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.order_numbers {
		flex: 1;
		color: #333333;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 22rpx;
		margin-right: 35rpx;
	}

	/* 接单按钮 */
	.tabbar_btn {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn_left {
		flex: 1;
		height: 80rpx;
		color: white;
		background: #33D442;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-left: 35rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		letter-spacing: 3rpx;
	}

	.btn_right {
		flex: 1;
		height: 80rpx;
		color: white;
		background: #FF7F00;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-left: 20rpx;
		margin-right: 35rpx;
		font-size: 26rpx;
		letter-spacing: 3rpx;
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: #FF7F00;
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		letter-spacing: 2rpx;
	}
</style>